<template>
	<!-- 我的报告-->
	<div class="optimization">
		<!-- 头部 -->
		<div class="optimizationTop">
			<div class="optimization_logo">
				<img src="../../static/image/16557845140690910146.png" alt="">
			</div>
			<div class="optimization_title">
				<div class="title_left">我的报告</div>
				<div class="title_right">
					<div class="title_right-left" @click="infodiv">
					  <div> <el-avatar size="small" :src="this.address"></el-avatar></div>
					  <div>{{this.username}}</div>
					</div>
					<div class="line"></div>
					<div class="loout" @click="lyout">退出</div>
				</div>
			</div>
			<div class="active">
				<img src="../../static/image/16557845125699707747.png" alt="">
			</div>
		</div>
		<!-- 左侧导航栏 -->
		<div class="left">
			<ul>
				<li @click="sheji()">设计优化</li>
				<li @click="shenhe()">审核/合同签约</li>
				<li @click="shenheziliao()">结算审核资料</li>
				<li class="activeLi">我的报告</li>
			</ul>

		</div>
		<ul class="leftIcon">
			<li class="activeIconLi">
				<img src="../../static/image/16557845125746053644.png" alt="">
			</li>
		</ul>
		<!-- 内容部分 -->
		<div class="content">
			<div class="serch">
				<div class="serch_top">
					<div class="changetype">
						<div>订单类型：</div>
						<div>
							 <el-select v-model="value" placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							  </el-select>
						</div>
					</div>
					<div class="serchnum">
						<div>搜索：</div>
						<div>
							<el-input v-model="input" placeholder="请输入订单号"></el-input>
						</div>
					</div>
					<div class="surebtn" @click="search">确认</div>
				</div>
				<div class="serch_line"></div>
			</div>
			<div class="drawing_Table">
				<el-table :data="tableData" stripe style="width: 100%;">
					<el-table-column prop="id" label="序号" width="80">
					</el-table-column>
					<el-table-column prop="ordersType" label="订单类别" width="230">
					</el-table-column>
					<el-table-column prop="reportsType" label="项目" width="260">
					</el-table-column>
					<el-table-column prop="address" label="反馈文件" width="700">
					</el-table-column>
					<el-table-column label="操作" width="80">
						<template slot-scope="scope">
							<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
								width="100" size="small">
								下载
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog title="" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false"
			width="40%">
			<div class="info">
				<div class="infopic">
					<img :src="this.address" alt="" alt="">
				</div>
				<div class="name" style="margin-top: 10px;color: #333;">{{this.username}}</div>
				<div class="name" style="color: #999;">2021-03-24 09:25:30</div>
			</div>
			<div class="img_6">
				<div @click="ZHinfo">
					<el-dropdown-item style="color: #1C62F9;">账号信息</el-dropdown-item>
				</div>
				<div @click="switchome">
					<el-dropdown-item style="color: #fff;">切换房屋</el-dropdown-item>
				</div>
			</div>
		</el-dialog>
	</div>
	</div>
</template>

<script>
	export default {
		name: 'optimization',
		data() {
			return {
				options: [{
				  value: '1',
				  label: '全流程咨询'
				}, {
				  value: '2',
				  label: '设计优化'
				}, {
				  value: '3',
				  label: '审核/合同签约'
				}, {
				  value: '4',
				  label: '主材咨询'
				}, {
				  value: '5',
				  label: '施工巡检'
				},
				{
				  value: '6',
				  label: '验收'
				},
				{
				  value: '7',
				  label: '选材咨询'
				},
				{
				  value: '8',
				  label: '全流程管家'
				}],
				value: '',
				tableData: '',
				input:'',
				username:'',
				dialogTableVisible: false,
			}
		},
		beforeCreate() {
			// document.querySelector('body').setAttribute('style', 'background-color:#f6f7f9')
		},
		beforeDestroy() {
			// document.querySelector('body').removeAttribute('style')
		},
		created() {
			this.getdata();
			this.address = localStorage.getItem('address');
			this.username=localStorage.getItem('name');
		},
		methods: {
			switchome(){
				 this.$router.push({
					path: '/switchome'
				}) 
				this.dialogTableVisible = false;
			},
			ZHinfo(){
				this.$router.push({
				    path: '/ZHinfo'
				}) // 带
				this.dialogTableVisible = false;
			},
			infodiv(){
				this.dialogTableVisible = true;
			},
			deleteRow(){
				
			},
			lyout(){
				// 退出
				this.$axios({
					method: 'post',
					url: this.$api+'/app3/consumer/quit',
					data: {},
					headers:{
						token:localStorage.getItem('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						// console.log(res.data)
						 this.$message({
						   type: 'success',
						   message: '退出成功！'
						 });
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
					}else{
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
					}
				})
				},
			search(){
				// console.log(this.value)
				this.$axios({
					method: 'post',
					url: this.$api+'/reports/queryReportsPc',
					data: {
						pageNum: 1,
						pageSize:10,
						ordersType:this.value,
						ordersNumber:this.input
					},
					headers:{
						token:localStorage.getItem('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						this.tableData = res.data.data;
					}else{
						//  this.$message({
						//   type: 'info',
						//   message: res.msg
						// });
					}
				})
			},
			getdata(){
				this.$axios({
					method: 'post',
					url: this.$api+'/app3/reports/queryReportsPc',
					data: {
						pageNum: 1,
						pageSize:10,
					},
					headers:{
						token:localStorage.getItem('token')
					}
				}).then(res=>{
					if(res.data.code==200){
						console.log(res.data,'报告列表')
						this.tableData = res.data.data;
						console.log(this.tableData,'this.tableData')
					}else{
						//  this.$message({
						//   type: 'info',
						//   message: res.msg
						// });
					}
					
					// console.log(res)
				})
			},
			shenhe() {
				this.$router.push('/examine')
			},
			shenheziliao() {
				this.$router.push('/settlement')
			},
			sheji() {
				this.$router.push('/optimization')
			}
		}
	}
</script>


<style scoped>
	.info {
		
	}
	.info .name{
		text-align: center;
		line-height: 30px;
		font-size: 14px;
	}
	.infopic{
		width: 30%;
		margin:0 auto;
	}
	.infopic img{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-left: 30%;
		z-index: -1;
	}
	.infopic div{
		background-color: #1C62F9;
		border-radius: 18px;
		width: 80px;
		height: 20px;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 43%;
		left: 43%; 
	}
	.img_6 {
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #eee;
		padding-top: 20px;
	}
	
	.img_6 div {
		width: 30%;
	
	}
	.img_6 div:first-child{
		border: 1px solid #1C62F9;
		border-radius: 18px;
		
		text-align: center;
	}
	.img_6 div:last-child{
		background-color:#1C62F9 ;
		border-radius: 18px;
		color: #fff;
		text-align: center;
	}
	.text_info {
		width: 100px;
		height: 80px;
		border: 1px solid red;
	}
	ul li {
		list-style: none;
		color: #fff;
		padding: 0;
		margin: 0;
	}
	.serch_top{
		display: flex;
		/* border: 1px solid red; */
		width: 90%;
		margin: 20px auto;
	}
	.changetype{
		display: flex;
		width: 20%;
		font-size:1rem;
		line-height: 40px;
	}
	.serchnum{
		display: flex;
		width: 20%;
		font-size:1rem;
		line-height: 40px;
	}
	
	.serch_line{
		width:90%;
		height: 1px;
		border-bottom: 1px dashed #eee;
		margin: 20px auto;
	}
	.surebtn{
		width: 60px;
		background-color: #158aff;
		color: #fff;
		text-align: center;
		height: 40px;
		border-radius: 6px;
		line-height:40px ;
	}
	
	.optimizationTop {
		width: 100%;
		height: 36px;
		background-color: rgba(29, 106, 255, 1);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;

	}
	/deep/.el-select-dropdown__item{
		color: #333;
		text-align: center;
	}
	.el-button--text {
		color: #333 !important;
	}

	.optimization_logo {
		width: 55px;
		height: 20px;
		margin-top: 6px;
		margin-left: 30px;
	}

	.optimization_logo img {
		width: 100%;
		height: 100%;
	}

	.optimization_title {
		width: 89%;
		color: #fff;
		margin-left: 2.8%;
		display: flex;
		line-height: 36px;
		justify-content: space-between;
	}

	.title_left {
		width: 20%;
		font-size: 14px;
		text-align: center;
	}

	.title_right-left {
		display: flex;
		font-size: 14px;
		/* width: 60px; */
		justify-content: space-between;
	}

	.el-avatar--small{
		  margin-top: 10%;
		  margin-right: 5px;
	}

	.title_right {
		display: flex;
		font-size: 14px;
	}

	.line {
		width: 1px;
		height: 10px;
		background-color: #fff;
		margin-top: 13px;
		margin-left: 20px;
	}

	.loout {
		width: 70px;
		text-align: center;
	}

	.active {
		position: absolute;
		top: 21px;
		left: 15%;
		width: 50px;
		height: 3px;
	}

	.active img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.left {
		position: absolute;
		left: 0;
		top: 0;
		width: 120px;
		height: 100%;
		z-index: 9;
		background-color: rgb(0, 14, 38);
	}

	.left ul {
		margin-top: 55px;
		padding-left: 0;
		text-align: center;
	}

	.left ul li {
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.activeLi {
		background-color: rgb(7, 36, 90);
	}

	.leftIcon {
		position: absolute;
		top: 18%;
		left: -39px;
	}

	.activeIconLi {
		width: 5px;
		height: 20px;
	}

	.activeIconLi img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.content {
		width: 100%;
		height: 85%;
		position: absolute;
		top: 7%;
		left: 3%;
	}



	.drawing_Table {
		width: 90%;
		margin: 0 auto;
	}

	.text_84 {
		color: #ff371d;
		font-size: 0.75rem;
		font-family: '.AppleSystemUIFont';
		height: 40px;
		line-height: 40px;
	}

	.con_btn {
		display: flex;
		justify-content: space-between;
		width: 40%;
		margin: 0 auto;
		margin-top: 50px;
		font-size: 1rem;
	}

	.cencel {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		border: 1px solid #eee;
		background-color: #fff;
	}

	.submit {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		background-color: #1d6aff;
		color: #fff;
	}
</style>
